<template>
    <div class="Home">
        <div class="header">
            <img src="@/assets/logo.png" alt="">
            ky影院
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        
        <!-- 尾部导航栏app通用 -->
        <div class="footer-container">
            <div class="footer-blank"></div>
            <div class="footer">
                <div 
                    :class="['footer-item',index==0?'active':'']"
                    @click="goto(0)">
                    <i class="bi bi-film"></i>
                    <span>电影</span>
                </div>
                <div 
                    :class="['footer-item',index==1?'active':'']"
                    @click="goto(1)">
                    <i class="bi bi-person-video3"></i>
                    <span>影院</span>
                </div>
                <!-- <div 
                    :class="['footer-item',index==2?'active':'']"
                    @click="goto(2)">
                    <i class="bi bi-person"></i>
                    <span>用户</span>
                </div> -->
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            index: 0, // 高亮下标
            // 子组件的名字
            comNames: [
                'movie',
                'cinema',
                'user'
            ]
        }
    },
    methods: {
        goto(n) {
            this.$router.push('/home/'+this.comNames[n]);
            this.index = n;
        }
    },
    mounted() {
        // 防止直接进入影院时，高亮默认在movie模块
        let url = document.location.href;
        // console.log(url.split('/').slice(-1)[0]);
        let name = url.split('/').slice(-1)[0];
        var i = -1;
        for(var j in this.comNames){
            if(this.comNames[j] == name){
                i = j;
                break;
            }
        }
        if(i >= 0) {
            this.index = i;
        }else {
            this.$router.push('/xxxxxxx')
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/common/variable.scss";
.Home {
    .header {
        font-size: 26px;
        height: 60px;
        line-height: 60px;
        position: relative;
        text-align: center;
        background: $color2;
        color: white;
        img {
            height: 30px;
            width: 30px;
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -15px;
        }
    }
    // 处理footer的样式
    // 填充，fixed导致的遮住主页内容
    .footer-blank {
        height: 50px;
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #eee;
        div {
            font-size: 18px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #ccc;
            &:last-child {
                border-right: 0px;
            }
            span {
                font-size: 14px;
                // padding: 2px 0;
            }
            &.active {
                color: $color2;
            }
        }
    }
}
</style>